<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小兔鲜儿-登录</title>
  <!-- icon图标 -->
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
  <!-- 样式初始化 -->
  <link rel="stylesheet" href="./css/base.css">
  <!-- 公共样式 -->
  <link rel="stylesheet" href="./css/common.css">
  <!-- 字体图标 -->
  <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
  <!-- 主页样式 -->
  <link rel="stylesheet" href="./css/register.css">
</head>

<body>
  <!-- 头部导航 -->
  <header>
    <!-- 快捷菜单 -->
    <div class="xtx-shortcut">
      <nav class="w">
        <ul class="top-nav fr">
          <li><a href="./login.html">请先登录</a></li>
          <li><a href="./register.html">免费注册</a></li>
          <li><a href="./order.html">我的订单</a></li>
          <li><a href="./center.html">会员中心</a></li>
          <li><a href="javascript:;">帮助中心</a></li>
          <li class="about"><a href="javascript:;">联系我</a></li>
          <!-- 新窗口打开 -->
          <li class="concern"><a href="javascript:;">关注我</a></li>
          <li><a target="_blank" href="http://mcongblog.com/">我的博客</a></li>
        </ul>
      </nav>
    </div>
    <!-- 主导航 -->
    <div class="xtx-main-nav w">
      <!-- logo -->
      <h1 class="xtx-logo fl">
        <a href="javascript:;">小兔鲜儿</a>
      </h1>
      <!-- 顶部导航 -->
      <nav class="fl">
        <ul class="main-nav-font">
          <li>
            <a href="index.html">首页</a>
          </li>
          <li>
            <a href="javascript:;">生鲜</a>
          </li>
          <li>
            <a href="javascript:;">美食</a>
          </li>
          <li>
            <a href="javascript:;">餐厨</a>
          </li>
          <li>
            <a href="javascript:;">电器</a>
          </li>
          <li>
            <a href="javascript:;">居家</a>
          </li>
          <li>
            <a href="javascript:;">洗护</a>
          </li>
          <li>
            <a href="javascript:;">孕婴</a>
          </li>
          <li>
            <a href="javascript:;">服装</a>
          </li>
        </ul>
      </nav>
      <div class="main-search fl">
        <input type="text" placeholder="搜一搜" />
        <div class="car">
          <span>2</span>
        </div>
      </div>
    </div>
  </header>
  <!-- 主体内容 -->
  <section>
    <div class="xtx-wrapper">
      <div class="container">
        <!-- 卡片 -->
        <div class="xtx-card">
          <h3>新用户注册</h3>
          <form class="xtx-form">
            <div data-prop="username" class="xtx-form-item">
              <span class="iconfont icon-zhanghao"></span>
              <input name="username" type="text" placeholder="设置用户名称">
              <span class="msg"></span>
            </div>
            <div data-prop="phone" class="xtx-form-item">
              <span class="iconfont icon-shouji"></span>
              <input name="phone" type="text" placeholder="输入手机号码  ">
              <span class="msg"></span>
            </div>
            <div data-prop="code" class="xtx-form-item">
              <span class="iconfont icon-zhibiaozhushibiaozhu"></span>
              <input name="code" type="text" placeholder="短信验证码">
              <span class="msg"></span>
              <a class="code" href="javascript:;">发送验证码</a>
            </div>
            <div data-prop="password" class="xtx-form-item">
              <span class="iconfont icon-suo"></span>
              <input name="password" type="password" placeholder="设置6至20位字母、数字和符号组合">
              <span class="msg"></span>
            </div>
            <div data-prop="confirm" class="xtx-form-item">
              <span class="iconfont icon-suo"></span>
              <input name="confirm" type="password" placeholder="请再次输入上面密码">
              <span class="msg"></span>
            </div>
            <div class="xtx-form-item pl50">
              <i class="iconfont icon-queren"></i>
              已阅读并同意<i>《用户服务协议》</i>
            </div>
            <div class="xtx-form-item">
              <button class="submit">下一步</button>
              <!-- <a class="submit" href="javascript:;">下一步</a> -->
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>
  <!-- 底部 -->
  <footer>
    <div class="xtx-footer w">
      <!-- 客户服务 -->
      <div class="footer-server fl">
        <p>客户服务</p>
        <div class="service">在线客服</div>
        <div class="question">问题反馈</div>
      </div>
      <!-- 关注我们 -->
      <div class="footer-we fl">
        <p>关注我们</p>
        <div class="number">公众号</div>
        <div class="weibo">微博</div>
      </div>
      <!-- 下载APP -->
      <div class="footer-download fl">
        <p>下载APP</p>
        <div class="code">
          <img src="./uploads/qrcode.png" alt="">
        </div>
        <div class="download">
          <p>扫秒二维码</p>
          <br />
          <p>立即下载APP</p>
          <a href="javascript:;">立即下载</a>
        </div>
      </div>
      <!-- 服务热线 -->
      <div class="footer-hotline fr">
        <p>服务热线</p>
        <div class="num">400-0000-000</div>
        <span>周一至周日 8:00-18:00</span>
      </div>
    </div>

    <div class="xtx-bottom">
      <div class="w">
        <div class="bottom-service">
          <div class="bottom-box">
            <a href="javascript:;">价格亲民</a>
            <a href="javascript:;">物流快捷</a>
            <a href="javascript:;">品质新鲜</a>
          </div>
        </div>
        <div class="bottom-copyright">
          <ul>
            <li><a href="javascript:;">关于我们</a></li>
            <li><a href="javascript:;">帮助中心</a></li>
            <li><a href="javascript:;">售后服务</a></li>
            <li><a href="javascript:;">配送与验收</a></li>
            <li><a href="javascript:;">商务合作</a></li>
            <li><a href="javascript:;">搜索推荐</a></li>
            <li><a target="_blank" href="http://mcongblog.com/">友情链接</a></li>
          </ul>
          <p>CopyRight © A Lucky Boy 版权所有</p>
        </div>
      </div>
    </div>
  </footer>
  <script src="./js/register.js"></script>
  <script src="./js/common.js"></script>

</body>

</html>